import React, { useState, forwardRef, useEffect } from "react";
import { Popup, Icon } from 'zarm';
// 用来搭配相对hooks函数，实现组件传值
import PropTypes from "prop-types";
// 动态添加类名
import cx from 'classnames'
import s from './style.module.less'
import { get } from '@/utils'



// forwardRef ，用来声明当前组件可以被获取.
// 注意它的写法，要将整个箭头函数包起来
const PopupType = forwardRef(({ onSelect }, ref) => {           //在子组件内接收一个 ref 标记，然后再在下面使用
    const [show, setShow] = useState(false);
    // 用来判断是否需要添加动态类名
    const [active, setActive] = useState('all');
    // 循环支出类型标签的数据源
    const [expense, setExpense] = useState([]); // 支出类型标签
    const [income, setIncome] = useState([]); // 收入类型标签

    useEffect(async () => {
        const { data: { list } } = await get('/api/type/list')
        if (list) {
            console.log('请求类型数据成功(PopupType页面的打印)：', list);
        } else {
            console.log('请求类型数据失败!(PopupType页面的打印)');
        }


        //筛选放置请求到的数据          filter  过滤出当前数组中满足条件的数据，且返回一个新的数组
        setExpense(list.filter(i => i.type ==1))
        setIncome(list.filter(i => i.type ==2))

    }, [])



    const choseType = (item) => {
        // 之后点支出或收入的时候，就改变active
        setActive(item.id)          //设置高亮动态类

        // 选择类型后将弹出框关闭
        // setTimeout(() => {
        //     setShow(false)
        // }, 200)
        setShow(false)




        // 选择类型后，要将选择的类型告诉父组件，父组件根据选择进行对应内容展示
        // 调用父组件给的 onSelect
        onSelect(item)      //item代表选中的那条数据



    }



    // 如果父组件真的在子组件上绑定了 ref  标记
    if (ref) {
        // 那么子组件就会在 ref 上添加一个 current 值，所以在父组件能直接找到 current 数据.
        ref.current = {
            show: () => {
                setShow(true)
            },
            close: () => {
                setShow(false)
            }
        }
    }







    return <Popup
        visible={show}
        onMaskClick={() => setShow(false)}
    >
        <div className={s.popupType}>
            <div className={s.header}>
                请选择类型
                <Icon type="wrong" className={s.cross} onClick={() => setShow(false)} />
            </div>
            <div className={s.content}>
                {/* 选择类型的时候，执行 choseType ，设置 active */}
                <div onClick={() => choseType({ id: 'all' })} className={cx({ [s.all]: true, [s.active]: active == 'all' })}>全部类型</div>

                <div className={s.title}>支出</div>
                <div className={s.expenseWrap}>
                    {
                        expense.map((item, index) => <p onClick={() => choseType(item)} key={index} className={cx({ [s.active]: active == item.id })}>{item.name}</p>)
                    }
                </div>

                <div className={s.title}>收入</div>
                <div className={s.incomeWrap}>
                    {
                        income.map((item, index) => <p onClick={() => choseType(item)} key={index} className={cx({ [s.active]: active == item.id })}>{item.name}</p>)
                    }
                </div>
            </div>
        </div>
    </Popup>
})

// 给组件挂上 propTypes 属性，然后再在属性内放上 onSelect 
PopupType.propTypes = {
    onSelect: PropTypes.func
}

export default PopupType
